import { _decorator, Component, Node, Sprite, SpriteFrame } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('GroundMap')
export class GroundMap extends Component {
    @property(Node) // 在這裡宣告 groundNode 屬性
    groundNode: Node = null; // 這個屬性將在編輯器中顯示，並可以將場景中的節點拖放到此處

    @property([SpriteFrame]) // 六個面的貼圖（從立方體滾動後獲得）
    cubeFaces: SpriteFrame[] = [];

    @property
    gridSize: number = 150 // 每個格子的大小（可以根據需要調整）

    private groundSprites: Sprite[] = []; // 地圖上的格子數組

    start() {
        // 初始化地圖格子
        this.initGround();
    }

    /**
     * 初始化地圖
     */
    initGround() {
      
        const rows = 3;  // 行數
        const cols = 5;  // 列數
        
        for (let i = 0; i < rows; i++) {
            for (let j = 0; j < cols; j++) {
                // 創建每個地面格子
                const gridNode = new Node();
                const gridSprite = gridNode.addComponent(Sprite);
                gridNode.setPosition(i * this.gridSize, j * this.gridSize);
                this.groundNode.addChild(gridNode);
                this.groundSprites.push(gridSprite);
            }
        }
    }

    /**
     * 更新地圖格子上的貼圖，將底面的貼圖顯示到指定位置
     * @param bottomFaceSprite 顯示的底面貼圖
     * @param gridIndex 地圖格子的索引，表示底面貼圖應顯示的位置
     */
    updateGround(bottomFaceSprite: SpriteFrame, gridIndex: number) {
        if (this.groundSprites[gridIndex]) {
            this.groundSprites[gridIndex].spriteFrame = bottomFaceSprite;
        }
    }
}
